<template>
    <div class="comment_item">
        <div class="userinfo">
            <el-avatar icon="el-icon-user-solid" size="large" shape="circle" :src="base_url + item.user.avatar"
                fit="fill"></el-avatar>
            <span>{{ item.user.username }}</span> <span v-if="item.user.role === '0'"
                style="color:red;margin-left:0.5vw;">管理员</span>
            <span style="margin-left: 0.5vw;color:gray">{{ item.
                publish_date }}</span>
        </div>
        <div class="content">{{ item.comment_text }}</div>
        <ChildLists v-for="its in item.childs" :key="its._id" :it="its"></ChildLists>
        <div style="display: flex;justify-content: flex-end;margin-top: 0.3vw;">
            <el-button type="primary"
                style="background-color: orange;border-radius: 10px;border: 0;font-size: 1vw;font-weight: bold;"
                size="default" @click="reply">回复</el-button>

        </div>
    </div>
</template>

<script setup lang="ts">
import ChildLists from "@/components/Comment_item/ChildLists.vue"
import DiscussStore from "@/store/DiscussStore";
const store = DiscussStore()
const base_url = import.meta.env.VITE_APP_URL
const props = defineProps(['item'])
const $emits = defineEmits(['replays'])
const reply = () => {
    store.send_replay(props.item.user.username, props.item._id)

}
</script>

<style scoped lang="scss">
.comment_item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid black;
    padding: 0.5vw;
    box-sizing: border-box;

    .userinfo {
        display: flex;
        align-items: center;

        .el-avatar {
            width: 3vw;
            height: 3vw;
            margin-right: 0.5vw;
        }

        span {
            font-size: 1vw;
            font-weight: bold;
            color: #009688
        }
    }

    .content {
        align-self: flex-end;
        width: 89%;
        margin-top: 0.5vw;
        background-color: #88D8B0;
        padding: 1vw;
        border-radius: 10px;
        font-size: 1vw;
    }
}
</style>